<template>
  <Layout title="我们为您准备了如下餐饮" backgroundColor="rgba(242, 245, 250, 1)">
    <template v-slot:right>
      <div class="nav-top__right--container">
        <div class="nav-top__right--container__text">
          已点
          <span>0</span>
        </div>
        <button @click="drawerToggle(true)">点我下单</button>
      </div>
    </template>
    <div class="drinks">
      <ul>
        <li class="active">
          <a href="javascript:;">
            <AutoImage src="/static/images/p1.jpg" alt :width="597" :height="456" />
            <div class="drink-name">咖啡</div>
          </a>
          <div class="drink-control">
            <button class="small hollow circle">
              <IconSubtract color="rgba(183, 183, 204, 1)" />
            </button>
            <button class="small">
              <span>1</span>
              <IconPlus />
            </button>
          </div>
        </li>
        <li>
          <a href="javascript:;">
            <AutoImage src="/static/images/p1.jpg" alt :width="597" :height="456" />
            <div class="drink-name">咖啡</div>
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <AutoImage src="/static/images/p1.jpg" alt :width="597" :height="456" />
            <div class="drink-name">咖啡</div>
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <AutoImage src="/static/images/p1.jpg" alt :width="597" :height="456" />
            <div class="drink-name">咖啡</div>
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <AutoImage src="/static/images/p1.jpg" alt :width="597" :height="456" />
            <div class="drink-name">咖啡</div>
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <AutoImage src="/static/images/p1.jpg" alt :width="597" :height="456" />
            <div class="drink-name">咖啡</div>
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <AutoImage src="/static/images/p1.jpg" alt :width="597" :height="456" />
            <div class="drink-name">咖啡</div>
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <AutoImage src="/static/images/p1.jpg" alt :width="597" :height="456" />
            <div class="drink-name">咖啡</div>
          </a>
        </li>
      </ul>
    </div>
    <Drawer to="drinks-order" :open="drawerVisible" title="当前已点" @close="drawerToggle(false)">
      <ul class="drinks-order">
        <li v-for="index in 10" :key="index">
          <div class="drinks-order-name">咖啡</div>
          <button class="small hollow">
            <IconSubtract color="rgba(183, 183, 204, 1)" />
          </button>
          <span>999</span>
          <button class="small">
            <IconPlus />
          </button>
        </li>
      </ul>
      <template v-slot:footer>
        <div class="drawer-footer-container">
          <a href="javascript:;">清空</a>
          <button class="large">下单</button>
        </div>
      </template>
    </Drawer>
  </Layout>
</template>
<script>
import Layout from "@/components/Layout";
import IconPlus from "@/components/IconPlus";
import IconSubtract from "@/components/IconSubtract";
import Drawer from "@/components/Drawer";

export default {
  components: { Layout, IconPlus, IconSubtract },
  data() {
    return {
      drawerVisible: false
    };
  },
  methods: {
    drawerToggle(status) {
      this.drawerVisible = status;
    }
  }
};
</script>
<style lang="stylus">
.nav-top__right--container {
  text-align: right;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 100px;
  box-sizing: border-box;
  height: 100%;
  width: 100%;

  .nav-top__right--container__text {
    font-size: 50px;
    padding-right: 57px;

    span {
      color: #026EEB;
    }
  }
}

.drinks {
  height: calc(100vh - 160px);
  overflow: auto;

  ul {
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
    display: flex;
    flex-flow: wrap;
    justify-content: flex-start;
    margin-top: 182px;
  }

  li {
    margin-left: 68px;
    margin-bottom: 68px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 14px 25px 2px rgba(28, 56, 122, 0.25);
    border-radius: 50px;

    a {
      display: flex;
      width: 597px;
      height: 632px;
      flex-direction: column;
      text-decoration: none;

      img {
        height: 456px;
        width: 100%;
        border: 0px;
        margin: 0;
      }

      .drink-name {
        height: 170px;
        line-height: 170px;
        font-size: 70px;
        font-weight: 400;
        margin: 0 62px;
        color: #000;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }

    &.active {
      border: 6px solid rgba(36, 97, 239, 1);
    }

    .drink-control {
      position: absolute;
      height: 140px;
      top: 0;
      left: 0;
      right: 0;
      padding: 0 40px;
      box-sizing: border-box;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;

      button {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-size: 0px;
        padding: 0 32px;

        span {
          font-size: 60px;
        }

        .icon-plus {
          margin-left: 25px;
        }
      }

      .hollow {
        padding: 0;
        text-align: center;
        justify-content: center;
      }
    }
  }
}

.drinks-order {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  overflow-y: auto;
  list-style: none;

  li {
    height: 219px;
    background: rgba(244, 247, 252, 1);
    margin-bottom: 10px;
    font-size: 60px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 72px;
    box-sizing: border-box;

    .drinks-order-name {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    span {
      display: inline-block;
      width: 177px;
      text-align: center;
    }

    button {
      min-width: 90px;
      font-size: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

.drawer-footer-container {
  height: 100%;
  width: 100%;
  position: relative;

  a {
    position: absolute;
    right: 0;
    top: 0;
    color: rgba(183, 183, 204, 1);
    font-size: 60px;
    text-decoration: none;
    padding: 0 53px;
  }

  button {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>